<template>
  <div class="app-login">
    <div class="app-login-left">
      <!-- autoplay -->
      <video id="my-video" loop="true" :muted="muted" :poster="videoBg">
        <source :src="loginMovie" type="video/mp4" />
      </video>
    </div>
    <div class="app-login-right">
      <div class="app-login-logo">
        <img :src="loginLogo" alt="" />
        <h2>Yuppie Game</h2>
      </div>
      <img
        class="app-login-sound"
        :src="muted ? soundCIcon : soundIcon"
        alt=""
        @click="toggleMuted"
      />
      <el-form :model="form" label-width="auto" style="max-width: 600px" class="app-login-form">
        <el-form-item>
          <el-input v-model="form.name" placeholder="请输入用户名" size="large">
            <template #prefix>
              <img :src="qqSvg" alt="" class="input-icon" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            type="password"
            show-password
            size="large"
          >
            <template #prefix>
              <img :src="captchaSvg" alt="" class="input-icon" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.savePass" label="保存密码" size="large" />
          <el-checkbox v-model="form.autoLogin" label="自动登录" size="large" />
        </el-form-item>
        <el-button type="primary" class="login-btn" size="large" @click="onLogin"
          >登录/注册</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import loginMovie from '../../assets/video/bg-move.mp4'
import videoBg from '../../assets/video/bg01.png'
import loginLogo from '../../assets/img/login/icon-login.png'
import qqSvg from '../../assets/img/login/qq.png'
import captchaSvg from '../../assets/img/login/password.png'
import soundIcon from '../../assets/img/login/sound.png'
import soundCIcon from '../../assets/img/login/sound-c.png'
import { useSettingsStore } from '@/store'
import { useRouter } from 'vue-router'
const muted = computed(() => settingsStore.muted)
const router = useRouter()
const toggleMuted = () => {
  settingsStore.toggleMuted()
}
const settingsStore = useSettingsStore()
const form = reactive({
  name: 'admin',
  password: '123456',
  savePass: false,
  autoLogin: false
})
const onLogin = () => {
  if (form.name && form.password) {
    useStorage('userInfo', form)
    router.push('/')
    return
  }
}
</script>

<style lang="scss" scoped>
.app-login {
  display: flex;
  width: 100%;
  height: 100%;
  &-left {
    width: 75%;
    overflow: hidden;
    video {
      height: 100%;
    }
  }
  &-right {
    width: 25%;
    background-color: rgba($color: #000000, $alpha: 0.6);
    padding: 20px;
    position: relative;
  }
  &-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 80px;
    flex-direction: column;
    font-size: 20px;
  }
  .input-icon {
    width: 24px;
  }
  &-form {
    margin-top: 60px;
  }
  .login-btn {
    width: 100%;
    background: $color_1;
    border-radius: 20px;
  }
  .app-login-sound {
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: 20px;
    width: 26px;
  }
}
</style>
